<template>
    <div class="out_box">
        <headers />
        
        <div class="content_box">
            <div class="detail_box mb_40">
                <h2 class="title bold">挖矿明细</h2>
                <div class="content">
                    <v-data-table :data='details_1' :columns='columns_1' :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div v-if="props.column.field === 'field_5'">
                                <span v-if="props.item.field_2 === '0.3000'">
                                    <i class="iconfont" style="color: #999;">&#xe7ac;</i>
                                    <span style="color: #EEAF00;">{{ props.item.field_5 }}</span>
                                </span>
                                <span v-else-if="props.item.field_2 === '0.4000'">
                                    <i class="iconfont" style="color: #FF3C00;">&#xe631;</i>
                                    <span style="color: #FF3C00;">{{ props.item.field_5 }}</span>
                                </span>
                                <span class="primary" v-else>{{ props.item.field_5 }}</span>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                </div>
            </div>
            <div class="detail_box mb_40 details_2">
                <h2 class="title bold">算力明细</h2>
                <div class="content">
                    <v-data-table :data='details_2' :columns='columns_2' :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div v-if="props.column.field === 'field_3'">
                                <span v-if="props.item.field_3.indexOf('+') > -1">
                                    <span style="color: #29CC00;">{{ props.item.field_3 }}</span>
                                </span>
                                <span v-else-if="props.item.field_3.indexOf('-') > -1">
                                    <span style="color: #FF3C00;">{{ props.item.field_3 }}</span>
                                </span>
                                <span v-else>{{ props.item.field_3 }}</span>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                </div>
            </div>
        </div>

        <footers />
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import Footers from '@components/footer/footer.vue';

    export default {
        name: "Details",
        components: {
            Headers,
            Footers
        },
        data: function() {
            return {
                columns_1: [
                    { title:"时间", field:'field_1', width: '16.66%' },
                    { title:"每M产量", field:'field_2', width: '16.66%' },
                    { title:"有效算力 M", field:'field_3', width: '16.66%' },
                    { title:"今日挖矿", field:'field_4', width: '16.66%' },
                    { title:"到账状态", field:'field_5', width: '16.66%' },
                    { title:"累计挖矿", field:'field_6', width: '16.66%' },
                ],
                columns_2: [
                    { title:"时间", field:'field_1', width: '16.66%' },
                    { title:"算力来源", field:'field_2', width: '16.66%' },
                    { title:"算力变化", field:'field_3', width: '16.66%' },
                    { title:"有效算力", field:'field_4', width: '16.66%' },
                    { title:"累计算力", field:'field_5', width: '16.66%' },
                    { title:"操作", field:'field_6', width: '16.66%' },
                ],
            }
        },
        computed: {
        },
        methods: {
            details_1: function(val) {
                return new Promise(function(resolve) {
                    resolve({
                        "result":[
                            // {
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "0.3000",
                            //     "field_3": "1000",
                            //     "field_4": "100.000",
                            //     "field_5": "延时发放",
                            //     "field_6": "280.00",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "0.4000",
                            //     "field_3": "1000",
                            //     "field_4": "100.000",
                            //     "field_5": "故障",
                            //     "field_6": "280.00",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "0.1000",
                            //     "field_3": "1000",
                            //     "field_4": "100.000",
                            //     "field_5": "已到账",
                            //     "field_6": "280.00",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "0.1000",
                            //     "field_3": "1000",
                            //     "field_4": "100.000",
                            //     "field_5": "已到账",
                            //     "field_6": "280.00",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "0.1000",
                            //     "field_3": "1000",
                            //     "field_4": "100.000",
                            //     "field_5": "已到账",
                            //     "field_6": "280.00",
                            // }
                        ],
                    });
                });
            },
            details_2: function(val) {
                return new Promise(function(resolve) {
                    resolve({
                        "result":[
                            // {
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "邀请所得",
                            //     "field_3": "+1000 M",
                            //     "field_4": "2200.00",
                            //     "field_5": "4200.00",
                            //     "field_6": "查看",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "邀请所得",
                            //     "field_3": "-1000 M",
                            //     "field_4": "2200.00",
                            //     "field_5": "4200.00",
                            //     "field_6": "查看",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "邀请所得",
                            //     "field_3": "-1000 M",
                            //     "field_4": "2200.00",
                            //     "field_5": "4200.00",
                            //     "field_6": "查看",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "邀请所得",
                            //     "field_3": "-1000 M",
                            //     "field_4": "2200.00",
                            //     "field_5": "4200.00",
                            //     "field_6": "查看",
                            // },{
                            //     "field_1": "2020/06/08 22:20:30",
                            //     "field_2": "邀请所得",
                            //     "field_3": "-1000 M",
                            //     "field_4": "2200.00",
                            //     "field_5": "4200.00",
                            //     "field_6": "查看",
                            // }
                        ],
                    });
                });
            }
        },
        mounted: function() {
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';
   
    .out_box{
        background-color: white;
    }
    .content_box{
        .content_spacing;
        margin: 40px 0;
        .detail_box{
            .title{
                padding: 10px 14px;
                font-size: 20px;
                background-color: #F5F5F5;
            }
            .content{
                /deep/ .ant-table-tbody>tr>td, /deep/ .ant-table-thead>tr>th{
                    text-align: center;
                    font-size: 13px;
                    font-weight: 700;
                    .iconfont{
                        font-size: 13px;
                    }
                    .primary{
                        color: @theme_color;
                    }
                }
                /deep/ .ant-table-thead>tr>th{
                    font-weight: normal;
                    background-color: white;
                }
            }
            &.details_2{
                /deep/ .ant-table-tbody>tr>td{
                    text-align: center;
                    font-size: 13px;
                    font-weight: 700;
                    &:last-child>span{
                        color: @theme_color;
                    }
                }
            }
        }

    }
</style>
